<%--
  Created by IntelliJ IDEA.
  User: John Cage
  Date: 2020/11/14
  Time: 9:29
  To change this template use File | Settings | File Templates.
--%>
<%@ include file="../common/IncludeTop.jsp"%>

<link rel="stylesheet" href="../css/cart.css" type="text/css" media="screen"/>
<script>
    function viewItemCart(itemObj)
    {
        $('#floatWindow').css({'height': window.innerHeight, 'display': 'block'}).addClass('showFloatWindow').removeClass('hideFloatWindow');
        console.log(itemObj);
        console.log(itemObj.getAttribute('data-itemId'));
        var item = 'itemId=' + itemObj.getAttribute('data-itemId');
        $('#displayBlock').css({'left': '25%', 'width': '50%'});
        $.get('viewItem', item, (data)=>
        {
            $('#displayBlock').html(data);
        });
    }
</script>
<div id="separator">Shopping Cart</div>
<div id="Cart">
    <form action="viewCart" name="shoppingCart" method="post">
        <div id="removeBtnLine"><div id="removeBtn">DELETE</div></div>
        <c:if test="${sessionScope.cart.numberOfItems == 0}">
            <div id="emptyCart">Your Cart Is Empty</div>
        </c:if>

        <c:forEach var="cartItem" items="${sessionScope.cart.cartItems}">
            <div class="cartItemDiv" data-cartItemId="${cartItem.item.itemId}">
                <div class="leftFrame">
                    <div class="checkBox"><input type="checkbox" class="checkBoxContent" data-cartItemId="${cartItem.item.itemId}"></div><!--空白
                    --><div class="itemPicture" style="background-image: url('../images/cartPic.png')" data-itemId="${cartItem.item.itemId}" onclick="viewItemCart(this)"></div>
                </div><!--空白
                --><div class="rightFrame">
                <div class="title">${cartItem.item.itemId}</div>
                <div class="subTitle">${cartItem.item.product.productId}</div>
                <div class="explain">${cartItem.item.attribute1} ${cartItem.item.attribute2}
                        ${cartItem.item.attribute3} ${cartItem.item.attribute4}
                        ${cartItem.item.attribute5} ${cartItem.item.product.name}</div>
                <div class="listPrice" id="listPrice${cartItem.item.itemId}"><fmt:formatNumber value="${cartItem.item.listPrice}" pattern="$#,##0.00" /></div>
                <div class="count">
                    <div class="mulCharacter">&times;</div>
                    <div class="addBtn" data-cartItemId="${cartItem.item.itemId}">+</div>
                    <input type="text" id="num${cartItem.item.itemId}" name="${cartItem.item.itemId}" size="3" value="${cartItem.quantity}" readonly="readonly"/>
                    <div class="subBtn" data-cartItemId="${cartItem.item.itemId}">-</div>
                </div>
                <div class="itemTotal" id="itemTotal${cartItem.item.itemId}"><fmt:formatNumber value="${cartItem.total}" pattern="$#,##0.00" /></div>
                </div>
            </div>
        </c:forEach>
        <div id="totalPrice">
            <div id="subTotal"><fmt:formatNumber value="${sessionScope.cart.subTotal}" pattern="$#,##0.00" /></div>
            <div id="explain">Sub Total:</div>
        </div>
    </form>

    <c:if test="${sessionScope.cart.numberOfItems > 0}">
        <c:if test="${sessionScope.account!=null}">
            <div onclick="window.location.href='checkOut'" class="checkOutBtn">Proceed to Checkout&nbsp;&gt;</div>
        </c:if>
        <c:if test="${sessionScope.account==null}">
            <div onclick="window.location.href='login'" class="checkOutBtn">Proceed to Checkout&nbsp;&gt;</div>
        </c:if>
    </c:if>
</div>

    <script>
        $(()=>
        {
            $('.addBtn').click(function () {
                var text = this.getAttribute('data-cartItemId');
                console.log(text);
                $("#num"+text).val(Number($("#num"+text).val())+1);

                var listPrice = Number(String($("#listPrice"+text).text()).replaceAll('$', '').replaceAll(',', ''));
                console.log(String($("#listPrice"+text).text()).replaceAll('$', '').replaceAll(',', ''));
                var total = Number(String($("#itemTotal"+text).text()).replaceAll('$', '').replaceAll(',', ''));
                total += listPrice;
                total = total.toFixed(2);
                $("#itemTotal"+text).text('$'+formatNumber(total));

                var sum = Number(String($("#subTotal").text()).replaceAll('$', '').replaceAll(',', ''));
                sum += listPrice;
                sum = sum.toFixed(2);
                $("#subTotal").text('$'+formatNumber(sum));


                $.ajax({
                    type:"GET",
                    url :"add?itemId="+text+"&listPrice="+listPrice,
                    dataType:"json",
                    success:function () {

                    },
                    error:function (jqXHR) {
                        console.log("ERROR:"+jqXHR.status);
                    }
                });
            });

            $('.subBtn').click(function () {
                var text = this.getAttribute('data-cartItemId');
                console.log(text);
                $("#num"+text).val(Number($("#num"+text).val())-1);

                var listPrice = Number(String($("#listPrice"+text).text()).replaceAll('$', '').replaceAll(',', ''));
                var total = Number(String($("#itemTotal"+text).text()).replaceAll('$', '').replaceAll(',', ''));
                total -= listPrice;
                total = total.toFixed(2);
                $("#itemTotal"+text).text('$'+formatNumber(total));

                var sum = Number(String($("#subTotal").text()).replaceAll('$', '').replaceAll(',', ''));
                sum -= listPrice;
                sum = sum.toFixed(2);
                $("#subTotal").text('$'+formatNumber(sum));

                $.ajax({
                    type:"GET",
                    url :"dec?itemId="+text+"&listPrice="+listPrice,
                    dataType:"json",
                    success:function () {

                    },
                    error:function (jqXHR) {
                        console.log("ERROR:"+jqXHR.status);
                    }
                });
            });

            $('#floatWindow').on('click', ()=>
            {
                $('#floatWindow').addClass('hideFloatWindow').removeClass('showFloatWindow');
                setTimeout(()=>
                {
                    $('#floatWindow').css({'display': 'none'});
                }, 300);
            });

            $('#displayBlock').on('click', (event)=>
            {
                event.stopPropagation();
            }).on("mousewheel DOMMouseScroll", function (e) {
                e.stopPropagation();
            });

            $('#removeBtn').click(function(){
                var ids = [];
                $.each($('.checkBoxContent'), (index, item)=>
                {
                    if(item.checked)
                    {
                        var attr = item.getAttribute('data-cartItemId');
                        ids.push(attr);
                        var sum = Number(String($("#subTotal").text()).replaceAll('$', '').replaceAll(',', ''));
                        var total = Number(String($("#itemTotal"+attr).text()).replaceAll('$', '').replaceAll(',', ''));
                        sum -= total;
                        console.log(total);
                        sum = sum.toFixed(2);
                        $("#subTotal").text('$'+formatNumber(sum));
                        $('.cartItemDiv[data-cartItemId=' + attr + ']').remove();
                    }
                });

                if($('.cartItemDiv').length == 0)
                {
                    var el = '<div id="emptyCart">Your Cart Is Empty</div>';
                    $('#removeBtnLine').after(el);
                }

                $.ajax({
                    url: "remove",
                    type: "POST",
                    data:{ids:ids},
                    traditional:true,
                    dataType:"json",
                    success: function (){
                        window.location.href = 'viewCart';
                    }
                });
            });
        });
    </script>

<%@ include file="../common/IncludeBottom.jsp"%>